<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:29:40
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-13 23:11:10
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header>
        <span>用户列表</span>
      </template>

      <!-- table -->
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="id" label="id" width="40" />
        <el-table-column prop="username" label="账号" width="120" />
        <el-table-column prop="nickname" label="昵称" width="120" />
        <el-table-column prop="sex" label="性别" width="60" />
        <el-table-column prop="tel" label="手机号" width="120" />
        <el-table-column prop="usable" label="权限" width="110">
          <template #default="scope">
            <el-tag>{{ roleName(scope.row.usable) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="290">
          <template #default>
            <el-button type="danger" icon="Delete">删除</el-button>
            <el-button type="primary" icon="Edit">编辑</el-button>
            <el-button type="success" icon="CollectionTag">标记</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from "vue";
import { role, user } from "@/api";

let userList = (await user.list()).data;
console.log(userList);
let roleList = (await role.getList()).data;
let roleName = (id) => {
  if (id === 0) return "普通用户";
  let res = {};
  res = roleList.find((item) => {
    return item.id === id;
  });
  return res["name"];
};

console.log(roleList);
</script>

<style lang='less' scoped>
</style>
